<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是段落A</p>
        <p id="para">我是段落B</p>
        <p>我是段落C</p>
    </div>


    <script>
        //节点的关系 
        //文本节点也属于节点，需要特别注意
        //空白文本也算作节点，但在IE8以上的浏览器不把空白文本当作节点
        //IE9开始，支持一些只考虑元素节点的属性
        // 子节点：childNodes--children
        // 父节点：parentNode--parentNode
        //第一个子节点：firstChild--firstElementChild
        //最后一个子结点:lastChild--lastElementChild
        //前一个兄弟节点：previousSibling--prebiousElementSibling
        //后一个兄弟节点：nextSibling--nextElementSibling

        var obox=document.getElementById('box');
        var opara=document.getElementById('para')
        //子节点
        console.log(obox.childNodes)//[text, p, text, p#para, text, p, text]   空文本也算上了
        //从IE9开始，支持一些只考虑元素节点的属性
        console.log(obox.children)//[p, p#para, p, para: p#para]  不包括空文本，但是包括属性节点

        //第一个子节点
        console.log(obox.firstChild)//#text
        console.log(obox.firstElementChild)//<p>我是段落A</p>

        //最后一个子节点
        console.log(obox.lastChild)//#text
        console.log(obox.lastElementChild)//<p>我是段落C</p>

        //前一个兄弟节点
        console.log(obox.previousSibling)//#text
        console.log(obox.previElementousSibling)//undefined
        console.log(opara.previousSibling)//#text
        console.log(opara.previousElementSibling)//<p>我是段落A</p>

        //后一个兄弟节点
        console.log(obox.nextSibling)//#text
        console.log(obox.nextElementSibling)//<script.>...<./script>
        console.log(opara.nextSibling)//#text
        console.log(opara.nextElementSibling)//<p>我是段落C</p>

        //父元素节点
        console.log(obox.parentNode)//<body.>...<./bodt>
        console.log(opara.parentNode)//<div id="box">...</div>


        
    </script>
</body>
</html>